<template>
  <div class="bg-gray-200">
    <mheader />
    <div class="main mx-auto bg-white">
      <!-- 侧边栏 -->
      <div class="leftside border-r border-solid border-gray-300">
        <div @click="typeClick('heat')">热度榜</div>
        <div @click="typeClick('collects')">收藏榜</div>
        <div @click="typeClick('likes')">点赞榜</div>
      </div>
      <!-- 内容 -->
      <div class="inner p-3 grid grid-cols-5 gap-2 w-full overflow-y-auto">
        <comicCard v-for="item in list" :key="item.id" :obj="item"></comicCard>
      </div>
    </div>
  </div>
</template>
<script setup>
import mheader from "@/components/home-header.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation } from "swiper";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { ArrowDown } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import comicCard from "@/components/comicCard.vue";
import bottom from "@/components/bottom-rail.vue";
import request from "@/axios/http";
const list = ref([]);
const typeValue = ref("collects");
onMounted(() => {
  getList();
});
const typeClick = (value) => {
  typeValue.value = value;
  getList();
};
const getList = () => {
  request({
    url: "comic/getAllComic",
    method: "post",
    data: {
      pageNum: 1,
      pageSize: 15,
      orderField: typeValue.value,
      data: {},
    },
  }).then((res) => {
    // console.log(res);
    if (res.code == 200) {
      list.value = res.data.records;
    }
  });
};
</script>
<style scoped>
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.main {
  padding-top: 75px;
  display: flex;
  width: 1100px;
  height: 100vh;
  /* padding: 55px 55px 270px 270px; */
  /* background-color: brown; */
}

.leftside {
  width: 150px;
  /* background-color: aqua; */
}

.leftside div {
  width: 150px;
  height: 45px;
  text-align: center;
  justify-content: center;
  line-height: 45px;
  transition: all 0.2s;
  cursor: pointer;
}
.leftside div:hover {
  background-color: lightblue;
  color: white;
}
.leftside div.is-focus {
  background-color: lightblue;
  color: white;
}
.inner {
  /* background-color: blueviolet; */
  /* width: 860px; */
}
</style>
<style scoped>
.book-card {
  width: 150px;
  height: 200px;
}
</style>
